<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/cloudDisk/assets/images/favicon.png" type="image/png">
    <title></title>

    <!-- BEGIN PAGE LEVEL STYLES -->
    <link href="/cloudDisk/assets/plugins/datatables/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css"/>
    <link href="/cloudDisk/assets/plugins/datatables/css/jquery.dataTables-custom.css" rel="stylesheet" type="text/css"/>
    <!-- END PAGE LEVEL STYLES -->
    <link href="/cloudDisk/assets/css/icons.css" rel="stylesheet">
    <link href="/cloudDisk/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="/cloudDisk/assets/css/style.css" rel="stylesheet">
    <link href="/cloudDisk/assets/css/responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

</head>

<body class="sticky-header">


<div>

    <!-- header section start-->
    <div class="header-section">

        <!--notification menu start -->
        <!--notification menu end -->

    </div>
    <!-- header section end-->



    <!--body wrapper start-->
    <div class="wrapper">


        <!--Start Page Title-->
        <div class="page-title-box">
            <h4 class="page-title">Hadoop云盘</h4>
            <ol class="breadcrumb">
                <li>
                    <a href="#">我的网盘</a>
                </li>
                <li>
                    <a href="#"></a>
                </li>
                <li class="active">
                    hadoop网盘
                </li>
            </ol>
            <div class="clearfix"></div>
        </div>
        <!--End Page Title-->


        <!--Start row-->
        <div class="row" id="app">
            <div class="col-md-12">
                <div class="white-box">

                    欢迎您:{{uname}}<a href="avascript:void" @click="logout">退出</a>
                    <hr/>
                    <input type="file" class="upload" name="myfile" ref="myfile" />
                    <br/>
                    <input type="button" class="btn btn-primary round" value="上传"  @click="uploadData()"/>

                    <input type="button" class="btn btn-pink round" value="新建目录" @click="mkdir()"/>
                    <hr/>

                    <h2 class="header-title">文件列表</h2>
                    <div class="table-responsive">
                        <table id="example" class="display table">
                            <thead>
                            <tr>
                                <td>文件名</td>
                                <td>类型</td>
                                <td>大小</td>
                                <td>副本数</td>
                                <td>最后修改时间</td>
                                <td>权限</td>
                                <td>创建者</td>
                                <td>组</td>
                                <td>操作</td>
                            </tr>
                            </thead>
                            <tbody id="content">
                            <tr v-for="(item,index) in fileStatus">
                                <td><span style="color: #ff0000" @click="show(item.relativePath,item.isFile)">{{item.fileName}}</span></td>
                                <td>{{item.isFile=='false'?'目录':'文件'}}</td>
                                <td>{{item.size}} </td>
                                <td>{{item.duplicates}} </td>
                                <td>{{item.modifyTime}} </td>
                                <td>{{item.rights}} </td>
                                <td>{{item.owner}} </td>
                                <td>{{item.group}} </td>
                                <td :data="item.filePath">
                                    <a type="button" class="btn btn-info outline-btn" @click ="deleteItem(item,index)">删除</a>
                                    <a type="button" class="btn btn-info outline-btn"  @click ="rename(item,index)">重命名</a>
                                    <a type="button" class="btn btn-info outline-btn" @click ="moveTo(item,index)">移动</a>
                                    <a type="button" class="btn btn-info outline-btn" @click ="copyTo(item,index)">复制</a>
                                    <a type="button"  class="btn btn-purple"  @click ="downLoad(item,index)">
                                        <i class="fa fa-download"></i>
                                        下载</a>
                                </td>

                            </tr>
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="9">{{totals}}</td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                    <a class="btn btn-danger" type="button" @click="goRoot()" >返回根目录</a>
                    <a class="btn btn-warning" type="button" @click="goUp()" >返回上一级</a>
                    当前路径为:<span id="pathDiv" :data="currentPath">
                         <a @click="show('{{currentPath}}')" >{{currentPath}}</a>
                     </span>
                    共<span id="fileCount">{{totals}}</span>个
                    <hr />
                    <h4>文件筛选</h4>
                    <input type="button" class="btn btn-primary" value="图片" @click="selectFile(1)" />
                    <input type="button" class="btn btn-primary" value="文档" @click="selectFile(2)" />
                    <input type="button" class="btn btn-primary" value="视频" @click="selectFile(3)" />
                    <input type="button" class="btn btn-primary" value="音乐" @click="selectFile(4)" />
                    <input type="button" class="btn btn-primary" value="所有" @click="selectFile(5)" />

                    <hr />
                </div>
            </div>
        </div>
        <!--End row-->




    </div>
    <!-- End Wrapper-->


</div>
<!--End main content -->


<!--Begin Page Level Plugin-->
<script src="/cloudDisk/assets/plugins/datatables/js/jquery.dataTables.min.js"></script>
<script src="/cloudDisk/assets/pages/table-data.js"></script>
<!--End Page Level Plugin-->

</body>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script>
    let vm =new Vue({
        el:"#app",
        data:{
            hdfsInfo:'',
            uname:'',//登录的用户名
            currentPath:'',//当前目录
            fileStatus:[], //所有文件
            fileCount:0, //文件数
            directoryCount:0, //目录数
            parentPath:'/' //父目录
        },methods:{
            moveTo:function(item,index){
                let newName=prompt("请输入目标位置",item.relativePath);
                if(newName==null ||  newName==''){
                    return;
                }
                let params = new URLSearchParams();
                params.append("parentPath",item.parentPath); //表示当前路径，因为移动后要将当前文件刷新
                params.append("path",item.filePath);
                params.append("newName",newName);

                axios.post('hdfs/moveTo.action',params).then(response =>{
                    if(response.data.code==1){
                        if(response.data.obj=='undefined' || response.data.obj==null){
                            this.fileStatus=[];
                        }else{
                            this.fileStatus=response.data.obj;
                        }
                    }

                });

            },
            copyTo:function (item,index) {
                let newName=prompt("请输入复制后要保存的位置",item.relativePath);
                if(newName==null ||  newName==''){
                    return;
                }
                let params = new URLSearchParams();
                params.append("parentPath",item.parentPath); //表示当前路径，因为移动后要将当前文件刷新
                params.append("path",item.filePath);
                params.append("newName",newName);
                axios.post('hdfs/copyTo.action',params).then(response =>{
                    if(response.data.code==1){
                        if(response.data.obj=='undefined' || response.data.obj==null){
                            this.fileStatus=[];
                        }else{
                            this.fileStatus=response.data.obj;
                        }
                    }

                });

            },
            downLoad:function (item,index) {
                let elemIF =document.createElement('iframe');
                if(item.isFile=='true'){
                    elemIF.src='hdfs/downloadFile.action?fileName='
                        +item.fileName+"&path="+item.relativePath;
                }else if(item.isFile=='false'){
                    elemIF.src='hdfs/downloadDirectory.action?fileName='
                        +item.fileName+"&path="+item.relativePath;
                }
                elemIF.style.display='none';
                document.body.appendChild(elemIF);
            },
            mkdir:function(){
                let newName=prompt("请输入新的目录名");
                if(newName==null || newName==''){
                    return;
                }
                if(newName.indexOf("/")!=-1){
                    alert("只能在当前目录创建新目录，不能创建嵌套目录");
                    return;
                }
                let params = new URLSearchParams();
                params.append("newName",newName);
                params.append("path",this.currentPath);
                axios.post('hdfs/mkdir.action',params).then(response =>{
                    if(response.data.code==1){
                        this.fileStatus.push(response.data.obj); //数组中向后追加一个对象
                    }
                });
            },
            deleteItem:function(item,index){
                let r= confirm("您确认删除吗？(注意：此目录及这个目录下所有文件都将删除，且不可恢复)");
                if(!r){
                    return;
                }
                let params = new URLSearchParams();
                params.append("path",item.filePath);
                axios.post('hdfs/deleteItem.action',params).then(response =>{
                    if(response.data.code==1){
                        //数组的函数操作才能让Vue感知到，自动渲染，而不能用数组字幕下表操作
                        this.fileStatus.splice(index,1); //
                    }
                });
            },
            rename:function(item,index){
                let newName= prompt("请输入新的文件名",item.fileName);
                if(newName==null || newName==''){
                    return;
                }
                let params = new URLSearchParams();
                params.append("oldPath",item.filePath); // /idea/a/b/xxx.txt
                params.append("newName",newName); //hello.txt
                axios.post('hdfs/rename.action',params).then(response =>{
                    if(response.data.code==1){
                        // this.fileStatus[index]=response.data.obj;
                        //不能通过下标的方法修改VM，这样不会触发Vue更新，要使用数组中的方法来完成
                        //数组的函数操作才能让Vue感知到，自动渲染，而不能用数组字幕下表操作
                        this.fileStatus.splice(index,1,response.data.obj); //
                    }
                });
            },
            goRoot:function(){//到根目录
                this.parentPath='/';
                this.currentPath=this.parentPath;
                this.listFile(this.currentPath);
            },
            logout: function () {
                let params = new URLSearchParams();
                axios.post('../logout.action',params).then(response =>{
                    if(response.data.code==1){
                        alert("安全退出");
                        window.location.href="login.html";
                    }
                });
            },
            show:function (path,isFile) {
                if(isFile=='true'){
                    alert(path+'是文件');
                    return;
                }
                this.parentPath=this.currentPath;
                this.currentPath=path;
                this.listFile(this.currentPath);
            },
            handleResponse:function (response) {
                //处理查询文件列表的相应数据
                if(response.data.code==1){
                    if(response.data.obj=='undefined' || response.data.obj==null){
                        this.fileStatus=[];
                        return;
                    }
                    this.fileStatus=response.data.obj;
                }
            }
            ,checkLogin:function () {
                return axios.get("checkLogin");
            },goUp:function () {
                if(this.currentPath=='/' || this.parentPath==''){
                    this.goRoot();
                    return;
                }
                var temp=this.parentPath;
                this.currentPath=this.parentPath;
                var index =this.parentPath.lastIndexOf("/");
                this.parentPath=this.parentPath.substring(0,index);
                this.listFile(temp);
            }
            ,listFile:function (path) {
                let params = new URLSearchParams();
                params.append("path",path);
                axios.post('hdfs/listFile',params).then(response =>{
                    this.handleResponse(response);
                });
            }
            ,selectFile:function (type) {
                this.currentPath='/';
                this.parentPath='/';
                let params = new URLSearchParams();
                params.append("type",type);
                axios.post('hdfs/listFileByType',params).then(response =>{
                    this.handleResponse(response);
                });
            }
            ,show:function(path,isFile){
                if(isFile=='true'){
                    alert(path+'是文件');
                    return;
                }
                this.parentPath=this.currentPath;
                this.currentPath=path;

                this.listFile(this.currentPath);

            }
            ,uploadData:function () {
                let myfile=this.$refs.myfile;
                let files =myfile.files; //所有待上传的文件
                let file = files[0]; //取出第一个
                var formData = new FormData();
                formData.append("file",file);
                formData.append("currentPath",this.currentPath);
                //axios请求 .then();
                this.uploadFileRequest("hdfs/uploadData.action",formData).then(response =>{
                    if(response.data.obj=='undefined' || response.data.obj==null){
                        this.fileStatus=[];
                    }else{
                        this.fileStatus=response.data.obj;
                    }
                });
            }
            ,uploadFileRequest:function (url,params) {
                return axios({
                    method:'post',
                    url:url,
                    data:params,
                    header:{
                        'Content-Type':'multipart/form-data'
                    }
                });
            }
            ,init:function (path) {
                let params = new URLSearchParams();
                params.append("path",path);
                return axios.post('hdfs/listFile',params);
            },
            getHdfsInfo:function () {
                let params = new URLSearchParams();
                axios.post('hdfs/getHdfsInfo.action',params).then(response =>{
                    if(response.data.code==1){
                        this.hdfsInfo=response.data.obj;
                    }
                });
            }
        }
        ,mounted:function () { //WINDOW.ONLOAD
            //发送请求：检测用户是否登录 获取所有菜品 显示当前用户的购物车
            axios.all([this.checkLogin(),this.init('/'),this.getHdfsInfo()])
                .then(axios.spread( (d1,d2) =>{ //需要用南部大表达式
                    if(d1.data.code==0){
                        alert("您还没有登录");
                        window.location.href="../login.html";
                        return;
                    }
                    this.uname=d1.data.obj;
                    if(d2.data.code==1){
                        this.fileStatus=d2.data.obj;
                    }
                }));
        },computed:{
            totals:function () {
                this.fileCount=0;
                this.directoryCount=0;
                if(this.fileStatus!=null && this.fileStatus.length>0){
                    for (let i=0;i<this.fileStatus.length;i++){
                        let ff= this.fileStatus[i];
                        if(ff.isFile=='false'){
                            this.directoryCount++;
                        }else{
                            this.fileCount++;
                        }
                    }
                }
                return "总文件数:"+this.fileStatus.length+",其中文件有:"+this.fileCount+"个,目录有:"+this.directoryCount;
            }
        }
    });
</script>

</html>
